import { ElSwitch, ElScrollbar, ElProgress, ElMessage } from "element-plus"
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()

const onEmployee = (row: any) => {
  let str = ''
  row.staffs.forEach((item: any, index: number) => {
    str += `${item.name}、`
  })
  row.depts.forEach((item: any, index: number) => {
    str += `${item.name}、`
  })
  str = str.substring(0, str.length - 1)
  return str
}

export const stageState = ref(0) // 0全部 1待审核 2已审核
export const useSubmitContent: { submit: Function } = { submit: () => {} }

export const tableOption = [
  {
    prop: 'name',
    label: '流程名称',
    width: 180
  },
  {
    prop: 'state',
    label: '状态',
    width: 180,
    render({ row, column, index }: any) {
      return <>
          <div class="switch">
            <ElSwitch v-model={row.state} active-value={2} inactive-value={1} /> <span>{ row.state_name }</span>
            <div class="switch_msk"></div>
          <div class="switch_msk" onClick={() => useSubmitContent.submit('onStatus', row)}></div>
          </div>
      </>
    }
  },
  {
    prop: 'address',
    label: '流程类型',
    width: 100,
    render({ row, column, index }: any) {
      return row.type == 1 ? '系统' : '自定义'
    }
  },
  {
    prop: 'address',
    label: '阶段路径',
    minWidth: 800,
    render({ row, column, index }: any) {
      return (<>
        <ElScrollbar class="scrollbar">
          <div class="step_box" style={{ transform: `translateX(-${0}px)` }}>
            {row.stages?.map((item: any, index: number) => (
              <div class='step' key={item.id} >
                <div class={index == row.stages.length - 1 ? 'num_current_last' : 'num_current'}>
                { index + 1 }
                </div>
                <div class="title">{ item.name }</div>
                <div class="desc">赢率{ item.win_rate }%</div>
              </div>
            ))}
          </div>
        </ElScrollbar>
      </>)
    }
  },
  {
    prop: 'use_range',
    label: '使用范围',
    width: 200,
    render({ row, column, index }: any) {
      if (row.use_range == 1) {
        return <div>全部员工</div>
      } else if (onEmployee(row).length > 10) {
        return <>
          <el-popover placement="top" width={400} trigger="hover" popper-class="popper">
            {{
              default: () => <>
                { onEmployee(row) }
              </>,
              reference: () => <div class="employee_box">
                { onEmployee(row) }
            </div>
            }}
        </el-popover>
        </>
      } else {
        return onEmployee(row)
      }
    }
  },
  {
    prop: 'operate',
    label: '操作',
    minWidth: 200,
    fixed: 'right',
    isOperate: true,
    option: [
      {
        name: '查看',
        click(row: any) {
          useSubmitContent.submit('LOOK', row)
        }
      },
      {
        name: '编辑',
        click: (row: any) => {
          useSubmitContent.submit('EDIT', row)
        }
      },
      {
        name: '规则配置',
        click: (row: any) => {
          useSubmitContent.submit('RULES', row)
        }
      },
      {
        name: '删除',
        click: (row: any) => {
          useSubmitContent.submit('onDelete', row)
        },
        isRender: ({ row }:any) => row.type != 1
      }
    ]
  }
]